import * as React from 'react';
import styles from './index.less';
import { Input, Menu, Tooltip, Pagination, Table, Breadcrumb } from 'antd';
import {
  SearchOutlined,
  EditOutlined,
  CloseOutlined,
  PlusCircleOutlined,
} from '@ant-design/icons';
import UserManagerList from '@/pages/userManager';

export default () => {
  let list: number[] = [];
  for (let i = 0; i < 10; i++) {
    list.push(i);
  }

  return (
    <>
      <div className="pageNavigate">
        <Breadcrumb>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          <Breadcrumb.Item>列表管理</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="pageMain">
        <div className="pageContent">
          <div className={styles.groupMain}>
            <div className={styles.groupLeft}>
              <div className={styles.groupLeftTitle}>
                项目分组&nbsp;
                <PlusCircleOutlined style={{ marginLeft: '160px' }} />
              </div>
              <div className={styles.groupLeftMenuMain}>
                <div style={{ marginLeft: '10px' }}>
                  <Input
                    style={{ width: '90%' }}
                    placeholder="请输入关键字"
                    suffix={
                      <SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
                    }
                  />
                </div>
                <div>
                  <Menu
                    mode="inline"
                    onSelect={(e) => {
                      console.log(e);
                      alert(e.key);
                    }}
                  >
                    {list.map((i) => {
                      return (
                        <Menu.Item key={`mk_${i}`}>
                          <div className={styles.menuItemMain}>
                            <Tooltip title="2021届Java软件编程1组">
                              <div className={styles.ellipsisTitle}>
                                2021届Java软件编程1组2021届Java软件编程1组
                              </div>
                            </Tooltip>
                            <div className={styles.menuIcon}>
                              <div className={styles.menuIconItem}>
                                <EditOutlined
                                  onClick={() => {
                                    alert('修改');
                                  }}
                                />
                                <CloseOutlined
                                  onClick={() => {
                                    alert('删除');
                                  }}
                                />
                              </div>
                            </div>
                          </div>
                        </Menu.Item>
                      );
                    })}
                  </Menu>
                  <div style={{ padding: '5px' }}>
                    <Pagination defaultCurrent={1} total={50} />
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.groupRight}>
              <UserManagerList />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
